<template>
  <div class="goods-add">
<!-- 步骤条 -->
<el-steps :active="active">
  <el-step title="步骤 1" description="基本信息"></el-step>
  <el-step title="步骤 2" description="商品列表"></el-step>
  <el-step title="步骤 3" description="商品内容"></el-step>
</el-steps>
 <!-- tabs栏标签页 -->
<el-tabs tab-position="left" @tab-click="handleClick" v-model="tabActive">
  <el-tab-pane label="基本信息" name="0">
    <!-- 表格 -->
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="商品名称" prop="goods_name">
    <el-input v-model="form.goods_name"></el-input>
  </el-form-item>
  <el-form-item label="商品价格" prop="goods_price">
    <el-input v-model="form.goods_price"></el-input>
  </el-form-item>
  <el-form-item label="商品重量" prop="goods_weight">
    <el-input v-model="form.goods_weight"></el-input>
  </el-form-item>
  <el-form-item label="商品数量" prop="goods_number">
    <el-input v-model="form.goods_number"></el-input>
  </el-form-item>
  <el-form-item label="商品分类" prop="goods_name">
  <!-- 级联选择器 -->
  <el-cascader
    v-model="form.good_cat"
    :options="options"
    :props="props"
    clearable>
    </el-cascader>
  </el-form-item>
<el-button type="primary" @click="next" >下一步</el-button>
</el-form>
  </el-tab-pane>
  <el-tab-pane label="商品列表" name="1" >
    <!-- 上传图片 -->
      <el-upload
          :action="$axios.defaults.baseURL + 'upload'"
          :headers="headers"
          name="file"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          list-type="picture-card">
          <i class="el-icon-plus"></i>
      </el-upload>
      <el-button type="primary" @click="next" >下一步</el-button>
  </el-tab-pane>
  <el-tab-pane label="商品内容" name="2">
    <!-- 富文本 -->
  <quill-editor v-model="form.goods_introduce"></quill-editor>
<el-button type="primary" @click="addGoods">添加</el-button>
  </el-tab-pane>
 </el-tabs>
 <!-- 预览对话框 -->
 <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
  </div>
</template>
<script>
export default {
  async created () {
    const { meta, data } = await this.$axios.get(`categories?type=3`)
    if (meta.status === 200) {
      this.$message.success(meta.msg)
      this.options = data
      // console.log(data)
    }
  },
  data () {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      tabActive: '0',
      active: 0,
      form: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        goods_cat: [], // 将来要和级联选择器绑定, 和级联选择器绑定的必须是一个数组,存放选中的元素
        goods_introduce: '',
        pics: [] // 数组 存着对象(上传的图片临时地址)
      },
      options: [], // 存放后台响应的商品信息
      props: {
        expandTrigger: 'hover',
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }
  },
  // 步骤进度条
  methods: {
    next () {
      // 控制步骤条
      this.active++
      // 控制标签页
      this.tabActive = this.active + ''
    },
    // 标签页
    handleClick (tab, event) {
      // console.log(tab, event)
      this.active = +tab.index
    },
    handlePictureCardPreview (file) {
      // 将图片文件的路径,赋值给dialogImageUrl
      this.dialogImageUrl = file.url
      // 控制对话框的显示
      this.dialogVisible = true
    },
    // 发送成功后把图片地址存起来
    handleSuccess (response, file, fileList) {
      // console.log(response)
      const { meta, data } = response
      if (meta.status === 200) {
        this.form.pics.push({
          pic: data.tmp_path
        })
      }
    },
    // 删除图片
    handleRemove (file, fileList) {
      console.log(file, fileList)
      // 获取需要删除的地址
      const fileName = file.response.data.tmp_path
      this.form.pics = this.form.pics.filter(item => item.pic !== fileName)
    },
    // 添加商品成功
    async addGoods () {
      if (this.form.goods_name.trim() === '') {
        this.$message.error('请输入内容')
      }
      const { meta } = await this.$axios.post(`goods`, {
        ...this.form,
        goods_cat: this.form.goods_cat.join(',')
      })
      if (meta.status === 200) {
        this.$message.success(meta.msg)
      }
    }
  }
}
</script>
<style lang="scss">
.goods-add{
.ql-editor{
  height: 300px;
}
}

</style>
